<html>
  <head>
    <base href="<%=basePath%>">
    <title>堆叠柱状图,折线面积图</title>
    <script type="text/javascript" src="./echarts.js"></script>
  </head>
  <body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
       
        var myChart = echarts.init(document.getElementById('main'));
        
        var option = {
            title: {
                text: '陈有根',
                left:'30px',
                textStyle: {    
                color: "red",
                fontSize: 17,   
                }
            },
            tooltip: {
                 trigger: "axis",  
            },
            legend: {
                itemWidth:15,  
                itemHeight:15,  
                data:['可用','不可用'],
            },
            xAxis: {
                data: ['1','2','3','4','5','6'],
                splitLine:{
                    show:false,
                },
            },
            yAxis: {
                 splitLine:{
                    show:false,
                },
            },
            series: [{
                name: '可用',
                type: 'bar',
                stack:'使用情况',
                data: [5, 20, 36, 10, 10, 20],
                itemStyle:{
                     normal:{color:"#FF8849"},
                }
            },{
                name: '不可用',
                type: 'bar',
                stack:'使用情况',
                data: [40, 22, 18, 35, 42, 40],
                itemStyle:{
                     normal:{color:"black"},
                }
            },{
                name:'1',
                type:'line',
                smooth:true,
                symbol:'circle',
                symbolSize: 0,
                itemStyle:{
                    normal:{
                        color:'red',
                        bordercolor:'green',
                        areaStyle:{
                            type:'default',
                            opacity:0.3
                        },
                    },
                },
                data:[11,25,33,42,12,26],
            },{
                name:'2',
                type:'line',
                smooth:true,
                symbol:'circle',
                symbolSize: 0,
                itemStyle:{
                    color:'blue',
                    bordercolor:'red',
                    areaStyle:{
                        type:'default',
                        opacity:0.8
                    },
                },
                data:[11,15,25,34,11,12],
            },
        ],
        };
        myChart.setOption(option);
    </script>
  </body>
</html>
